<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- v-model:是否处于加载更多状态 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <article-item v-for="obj in articleList" :key="obj.art_id" :obj="obj" @click.native="$router.push(`/article_detail?art_id=${obj.art_id}`)"></article-item >
        <!-- <article-item></article-item>
        <article-item></article-item> -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
import { getArticleListAPI } from '@/api'
export default {
  data () {
    return {
      articleList: [], // 文章列表
      loading: false,
      finished: false,
      nextTime: (new Date()).getTime(),
      refreshing: false // 顶部加载中状态
    }
  },
  props: {
    cid: Number // 频道id
  },
  components: {
    ArticleItem
  },
  created () {
    console.log(11)
    this.getArticleListFn()
  },
  methods: {
    // 获取文章列表数据
    async getArticleListFn () {
      const res = await getArticleListAPI({
        channel_id: this.cid,
        timestamp: this.nextTime
      })
      console.log(res)
      this.articleList = [...this.articleList, ...res.data.data.results]
      // 拿到时间戳 为了请求下一页数据
      this.nextTime = res.data.data.pre_timestamp
      // 加载更多状态设置为false 为下次触底做准备
      this.loading = false
      // 顶部转圈停下
      this.refreshing = false
      if (res.data.data.pre_timestamp === null) {
        this.finished = true // 触底后不再执行load事件
      }
      // console.log(this.articleList)
    },
    // 加载更多
    onLoad () {
      console.log(22)
      // 异步更新数据
      if (this.articleList.length > 0) {
        // 文章列表数组里有值的情况, 你再去加载更多
        this.getArticleListFn()
      }
    },
    // 下拉刷新
    onRefresh () {
      this.articleList = [] // 清空旧数据
      this.nextTime = new Date().getTime()
      // 重新获取列表数据
      this.getArticleListFn()
    }
  }
}
</script>

<style>

</style>
